<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="demo">
      <!-- 使用data中的数据, 双花括号中写data中的数据 -->
      <h1>你好，{{name}}</h1>
    </div>

    <script>
      Vue.config.productionTip = false;


      // 1. 创建Vue实例，传入配置对象。
      // 2. `el`是vue容器服务的对象，需要与容器一一对应。（如果匹配到多个，只生效于匹配到的第一个。）
      // 3. `data`是容器中的数据，data只要变化，模板用到该数据的地方就会自动更新。
      // 4. `{{}}`中要写js表达式，且可以直接看到data中配置的属性。


      new Vue({
        el:'#demo', // el: 指定当前的vue容器服务于哪个对象
        data:{  // data: 配置数据,容器中会用到这些数据
          name:'小黑' 
        }
      });
    </script>
  </body>
</html>
